<template>
<el-dialog
    :title="$t('user.member_recharge')"
    v-model="dialogVisible"
    @close="dialogFormVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="$t('user.recharge_balance')" name="first">
        <el-form size="small" :model="form">
          <el-form-item :label="$t('user.current_balance')" :label-width="formLabelWidth">
            <el-input
              v-model="form.balance"
              autocomplete="off"
              disabled="disabled"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('user.recharge_method')" :label-width="formLabelWidth">
            <el-radio-group v-model="recharge.balanceMode">
              <el-radio label="inc">{{$t('user.increase')}}</el-radio>
              <el-radio label="dec">{{$t('user.decrease')}}</el-radio>
              <el-radio label="final">{{$t('user.final_amount')}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="$t('user.change_amount2')" :label-width="formLabelWidth">
            <el-input
              v-model="recharge.money"
              autocomplete="off"
              :placeholder="$t('user.input_change_amount')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('user.admin_remark')" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              v-model="recharge.balanceRemark"
              :placeholder="$t('user.input_admin_remark')"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane :label="$t('user.recharge_points')" name="second">
        <el-form size="small" :model="form">
          <el-form-item :label="$t('user.points')" :label-width="formLabelWidth">
            <el-input
              v-model="form.points"
              autocomplete="off"
              disabled="disabled"
            ></el-input>
          </el-form-item>

          <el-form-item :label="$t('user.recharge_method')" :label-width="formLabelWidth">
            <el-radio-group v-model="recharge.pointsMode">
              <el-radio label="inc">{{$t('user.increase')}}</el-radio>
              <el-radio label="dec">{{$t('user.decrease')}}</el-radio>
              <el-radio label="final">{{$t('user.final_points')}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="$t('user.change_number')" :label-width="formLabelWidth">
            <el-input
              v-model="recharge.value"
              autocomplete="off"
              :placeholder="$t('user.input_change_number')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('user.admin_remark')" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              v-model="recharge.pointsRemark"
              :placeholder="$t('user.input_admin_remark')"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible">{{$t('user.cancel')}}</el-button>
        <el-button
          type="primary"
          @click="addUser(form.userId)"
          :loading="loading"
          >{{$t('user.confirm')}}</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>

<script>
import UserApi from "@/api/user.js";
export default {
  data() {
    return {
      loading: false,
      /*左边长度*/
      formLabelWidth: "120px",
      /*是否显示*/
      dialogVisible: false,
      /*默认选中*/
      activeName: "first",
      recharge: {
        balanceMode: "inc",
        balanceRenark: "",
        money: "",
        pointsMode: "inc",
        pointsRemark: "",
        value: ""
      },
      params: {},
      source: 0
    };
  },
  props: ["open_add", "form"],
  created() {
    this.dialogVisible = this.open_add;
  },
  methods: {
    /*选中*/
    handleClick(tab, event) {
      this.source = tab.index;
    },
    /*充值*/
    addUser(e) {
      let self = this;
      let params = this.recharge;
      let user_id = e;
      let source = self.source;
      params.userId = user_id;
      params.source = source;
      self.loading = true;
      UserApi.userRecharge(params, true).then(data => {
        self.loading = false;
        if (data.code == 1) {
          ElMessage({
            message: $t("user.edit_success"),
            type: "success"
          });
          self.dialogFormVisible(true);
        } else {
          self.loading = false;
          ElMessage.error($t("user.error_message"));
        }
      }).catch(error => {
        self.loading = false;
      });
    },
    /*关闭弹窗*/
    dialogFormVisible(e) {
      if (e) {
        this.$emit("closeDialog", {
          type: "success",
          openDialog: false
        });
      } else {
        this.$emit("closeDialog", {
          type: "error",
          openDialog: false
        });
      }
    }
  }
};
</script>

